<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://www.51xuecheng.cn/static/img/asset-favicon.ico">
    <title>我的收藏</title>
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/normalize-css/normalize.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/css/page-learing-personal-collection.css" />
</head>

<body>
<!-- 页面头部 -->
<!--#include virtual="/include/header.html"-->
    <div class="personal-header" style="background-image: url(http://www.51xuecheng.cn/static/img/asset-banner.png);">
        <!--<div class="personal-info">-->
        <!--<p><h1>吴雪</h1></p>-->
        <!--<p>Web前端工程师 学习时长 48小时35分</p>-->
        <!--</div>-->
        <!--<div class="container">-->
        <!--<div class="col-lg-2"><img src="http://www.51xuecheng.cn/static/img/logoIco.png" alt=""></div>-->
        <!--<div class="col-lg-4 title text-left">学习中心</div>-->
        <!--<div class="col-lg-6 text-right"><input type="text" class="input-search" placeholder="输入查询关键词"><input type="submit" class="search-buttom"></div>-->
        <!--</div>-->
    </div>
    <!-- 页面 -->
    <div class="container">
        <div class="personal-nav pull-left">
            <div class="nav nav-stacked text-left">
                <div class="title">个人中心</div>
                <div class="my-ico">
                    <img src="http://www.51xuecheng.cn/static/img/asset-myimg.jpg" alt="">
                    <p>梦醒时分</p>
                </div>
                <div class="item">
                   <!--#include virtual="/include/ucenter_menu.html"-->
                </div>
            </div>
        </div>
        <div class="personal-content pull-right">
            <div class="personal-collection-cont">
                <div class="top">
                    <div class="tit"><span>我的收藏</span></div>
                </div>
                <div class="content">
                    <div class="item">
                        <div class="item-left col-lg-3"><img src="http://www.51xuecheng.cn/static/img/widget-dem.png" width="100%" alt=""></div>
                        <div class="item-cent col-lg-9">
                            <div class="title">程序设计语言 <span>学习中</span></div>
                            <div class="star-show">
                                <div class="score"><i></i></div>
                            </div>
                            <div class="text">课程打分 <em>4.9星</em></div>
                            <div class="item-rit"><a href="#">取消收藏</a></div>
                            <div class="cont">
                                本课程介绍编程语言的基本概念，重点介绍函数式编程。本课程使用的语言ML，球拍，红宝石作为教学概念的车辆，但真正的意图是。本课程介绍编程语言的基本概念，重点介绍了这边分的内容
                            </div>
                            <a class="more" href="#">更多 ></a>
                        </div>
                    </div>

                    <div class="item">
                        <div class="item-left col-lg-3"><img src="http://www.51xuecheng.cn/static/img/widget-dem.png" width="100%" alt=""></div>
                        <div class="item-cent col-lg-9">
                            <div class="title">程序设计语言 <span class="success">已结业</span></div>
                            <div class="star-show">
                                <div class="score"><i></i></div>
                            </div>
                            <div class="text">课程打分 <em>4.9星</em></div>
                            <div class="item-rit"><a href="#">取消收藏</a></div>
                            <div class="cont">
                                本课程介绍编程语言的基本概念，重点介绍函数式编程。本课程使用的语言ML，球拍，红宝石作为教学概念的车辆，但真正的意图是。本课程介绍编程语言的基本概念，重点介绍了这边使用的语言ML，球拍，红宝石作为教学概念的车辆，但真正的意图是。本课程介绍编程语言的基本概念
                            </div>
                            <a class="more" href="#">更多 ></a>
                        </div>
                    </div>

                    <div class="item">
                        <div class="item-left col-lg-3"><img src="http://www.51xuecheng.cn/static/img/widget-dem.png" width="100%" alt=""></div>
                        <div class="item-cent col-lg-9">
                            <div class="title">程序设计语言 <span class="out">已关闭</span></div>
                            <div class="star-show">
                                <div class="score"><i></i></div>
                            </div>
                            <div class="text">课程打分 <em>4.9星</em></div>
                            <div class="item-rit"><a href="#">取消收藏</a></div>
                            <div class="cont">
                                本课程介绍编程语言的基本概念，重点介绍函数式编程。本课程使用的语言ML，球拍，红宝石作为教学概念的车辆，但真正的意图是。本课程介绍编程语言的基本概念，重点介绍了这边
                            </div>
                            <a class="more" href="#">更多 ></a>
                        </div>
                    </div>

                    <div class="item">
                        <div class="item-left col-lg-3"><img src="http://www.51xuecheng.cn/static/img/widget-dem.png" width="100%" alt=""></div>
                        <div class="item-cent col-lg-9">
                            <div class="watermark"><img src="http://www.51xuecheng.cn/static/img/widget-watermark.png" alt=""></div>
                            <div class="title">程序设计语言 <span class="Invalid">已失效</span></div>
                            <div class="star-show">
                                <div class="score"><i></i></div>
                            </div>
                            <div class="text">课程打分 <em>4.9星</em></div>
                            <div class="item-rit"><a href="#">取消收藏</a></div>
                            <div class="cont">
                                本课程介绍编程语言的基本概念，重点介绍函数式编程。本课程使用的语言ML，球拍，红宝石作为教学概念的车辆，但真正的意图是。本课程介绍编程语言的基本概念，重点介绍了这边
                            </div>
                            <a class="more" href="#">更多 ></a>
                        </div>
                    </div>
                    <div class="page-item"><span>首页</span><span>上一页</span><span class="active">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>下一页</span><span>尾页</span></div>
                </div>

            </div>
        </div>
    </div>
<!--底部版权-->
<!--#include virtual="/include/footer.html"-->

    <!-- 页面 css js -->
    <script type="text/javascript" src="../plugins/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="../plugins/bootstrap/dist/js/bootstrap.js"></script>
    <script>
        $(function() {
            $(window).scroll(function() {
                if ($(this)[0].scrollY > 235) {
                    $('.personal-nav').css({
                        'position': 'fixed',
                        'top': 10
                    });
                } else if ($(this)[0].scrollY <= 155) {
                    $('.personal-nav').css({
                        'position': 'relative',
                        'top': -70
                    });
                };
            })
            $('.content .cont').map(function(n, i) {
                var text = $(this).text().length
                if (text >= 100) {
                    $(this).text($(this).text().slice(0, 100) + '...')
                }
            })
        })
    </script>
</body>